<%--
  Created by IntelliJ IDEA.
  User: sofwin
  Date: 2021/3/26
  Time: 10:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%String path = request.getContextPath()+"/";%>
<!DOCTYPE html>
<HTML>
<HEAD>
    <base href="<%=path%>">
    <TITLE> ZTREE DEMO - Standard Data </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="js/tree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="layui/css/font.css">
    <link rel="stylesheet" href="js/tree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="js/tree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/tree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="js/tree/js/jquery.ztree.exedit.js"></script>

    <link rel="stylesheet" href="layui/lib/layui/css/layui.css">
    <script src="layui/lib/layui/layui.js" charset="utf-8"></script>

</HEAD>

<BODY>
<div class="layui-container" style="margin-top: 10px;">
        <div class="layui-col-md3" style="height: 100%;">
            <div id="treeDemo" class="ztree"></div>
        </div>
        <div class="layui-col-md9" style="border-left: 1px solid gray;height: 100%;">
            <form class="layui-form" action="" id="form1">
                <input type="hidden" name="id" id="id"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">资源名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="resourceName" id="resourceName" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">父级资源</label>
                    <div class="layui-input-block">
                        <input type="hidden" id="parentId" name="parentId"/>
                        <input type="text" id="chooseParent"  autocomplete="off" class="layui-input">
                        <div id="deptTree" style="display:none;z-index:10000;float:left;position: absolute;background-color: white;border:1px solid #EFEEF0;height:300px;overflow: auto;">
                           <div><div style="text-align: right" ID="closeMenu">X</div></div>
                            <div id="treeDemo2" class="ztree" style="height:300px"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">资源图标</label>
                    <div class="layui-input-block">
                        <input type="text" id="resourceIcon" name="resourceIcon" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">资源路径</label>
                    <div class="layui-input-block">
                        <input type="text" id="resourceUrl" name="resourceUrl"  placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">资源类型</label>
                    <div class="layui-input-block">
                        <select name="resourceType" id="resourceType" lay-verify="required">
                            <option value="0">菜单</option>
                            <option value="1">按钮</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限表示</label>
                    <div class="layui-input-block">
                        <input type="text" id="resourcePermission" name="resourcePermission"  placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" id="resourceSort" name="resourceSort" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn save" type="button" >立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

    </div>


</BODY>
<script>
    //JavaScript代码区域
    layui.use(['form','layer'], function(){
        var form = layui.form;
        layer=layui.layer;



        $(".save").click(function(){
            var param = $("#form1").serialize();
            $.ajax({
                url:'system/resource/save',
                type:'post',
                dataType:'json',
                data:param,
                success:function(ret){
                    if(ret.status){
                        layer.msg('保存成功',function(){
                            createTree();
                            $("#id").val('');
                            $("#form1")[0].reset();
                        })
                    }else{
                        layer.msg('操作失败');
                    }
                }
            })
        })

        <!--
        var setting = {
            data:{
                simpleData:{
                    enable:true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            edit:{
              enable:true,
                showRenameBtn:false
            },
            callback:{
                onClick:treeNodeClick,
                beforeRemove:deleteNode
            }
        };
        var setting2 = {
            data:{
                simpleData:{
                    enable:true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            callback:{
                onClick:chooseResource
            }
        };
        function deleteNode(treeId,treeNode){
            var id = treeNode.id;
                // $.getJSON('system/resource/delete?id='+id,function(ret){
                //     if(!ret.status){
                //         layer.msg('操作失败');
                //         return false;
                //     }else{
                //         layer.msg('123123')
                //         return true;
                //     }
                // })
            $.ajax({
                url:'system/resource/delete?id='+id,
                type:'get',
                dataType:'json',
                async:false,
                success:function(ret){
                    if(!ret.status){
                        layer.msg('操作失败');
                        return false;
                    }else{
                        layer.msg('123123')
                        return true;
                    }
                }
            })
        }
        function chooseResource(event,treeId,treeNode){
            $("#chooseParent").val(treeNode.name);
            $("#parentId").val(treeNode.id);
            $("#deptTree").hide();
        }
        $("#closeMenu").click(function(){
            $("#deptTree").hide();
        })
        //
        function treeNodeClick(event,treeId,treeNode){

            var id = treeNode.id;
            $.getJSON("system/resource/getResource?id="+id,function(ret){
                // 该资源的json对象  修改form表单组件
                $("#resourceName").val(ret.name);
                $("#id").val(ret.id);
                $("#resourceIcon").val(ret.resourceIcon);
                $("#resourcePermission").val(ret.resourcePermission);
                $("#resourceSort").val(ret.resourceSort);
                $("#resourceType").val(ret.resourceType);
                $("#resourceUrl").val(ret.resourceUrl);
                $("#parentId").val(ret.parentId);
                $("#chooseParent").val(ret.parent.name);
                form.render();
            });
        }

        // 1.从sys_resource表中获取到list，使用异步请求，设置dataType=json
        // 2.从作用域中获取到一个json格式的字符串 JSON.parse()
        var zNodes;

        $(document).ready(function(){
            createTree();
            var height = $(document).height();
            $(".layui-col-md9").css("height",height+"px");
        });
        // 生成树的方法
        function createTree(){
            $.getJSON('system/resource/treeData?t='+new Date(),function(ret){
                $.fn.zTree.init($("#treeDemo"), setting, ret);
                $.fn.zTree.init($("#treeDemo2"),setting2,ret);
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                // 全部展开
                treeObj.expandAll(true);
            })
        }
        $("#chooseParent").focus(function(){
            $("#deptTree").show();
        })
    });
</script>

</HTML>